import React, { useEffect, useState } from 'react';
import { Button, Tooltip, Tree } from 'antd';
import { VerticalAlignBottomOutlined, VerticalAlignMiddleOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
import "./index.scss"
export default function Basic({ datas, checkeds, type, handleMove, toggleFixedL, toggleFixedR, handleCheck }) {
    const [gData, setGData] = useState(datas);
    const [checkedKeys, setCheckedKeys] = useState(checkeds)
    const onCheck = (checkedKeysValue) => {
        // console.log('onCheck', checkedKeysValue);
        setCheckedKeys(checkedKeysValue);
        handleCheck(checkedKeysValue, type)
    };
    useEffect(() => {
        setGData(datas)
    }, [datas])
    useEffect(() => {
        setCheckedKeys(checkeds)
    }, [checkeds])
    const onDragEnter = (info) => {
        // console.log(info);
        // expandedKeys, set it when controlled is needed
        // setExpandedKeys(info.expandedKeys)
    };
    const onDrop = (info) => {
        const dropKey = info.node.key;
        const dragKey = info.dragNode.key;
        const dropPos = info.node.pos.split('-');
        const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); // the drop position relative to the drop node, inside 0, top -1, bottom 1

        const loop = (data, key, callback) => {
            for (let i = 0; i < data.length; i++) {
                if (data[i].key === key) {
                    return callback(data[i], i, data);
                }
                if (data[i].children) {
                    loop(data[i].children, key, callback);
                }
            }
        };
        const data = [...gData];

        // Find dragObject
        let dragObj;
        loop(data, dragKey, (item, index, arr) => {
            arr.splice(index, 1);
            dragObj = item;
        });
        let ar = [];
        let i;
        loop(data, dropKey, (_item, index, arr) => {
            ar = arr;
            i = index;
        });
        if (dropPosition === -1) {
            // Drop on the top of the drop node
            ar.splice(i, 0, dragObj);
        } else {
            // Drop on the bottom of the drop node
            ar.splice(i + 1, 0, dragObj);
        }
        setGData(data);
        handleMove(data)
    };
    return (
        <div>
            <div style={{
                maxHeight: '200px',
                overflowY: 'auto'
            }}>
                <Tree
                    checkable
                    onCheck={onCheck}
                    checkedKeys={checkedKeys}
                    className="draggable-tree"
                    draggable={gData.length > 1}
                    blockNode
                    onDragEnter={onDragEnter}
                    onDrop={onDrop}
                    treeData={gData}
                    titleRender={(nodeData) =>
                        <div className='nodeItem'>
                            <span>{nodeData.title}</span>
                            <Tooltip className='btn' title={nodeData.fixedS ? '不固定' : '固定在首列'}>
                                <Button type='link' onClick={() => toggleFixedL(nodeData)} size='small' icon={nodeData.fixedS ? <VerticalAlignMiddleOutlined /> : <VerticalAlignTopOutlined />}></Button>
                            </Tooltip>
                            <Tooltip className='btn' title={nodeData.fixedE ? '不固定' : '固定在尾列'}>
                                <Button type='link' onClick={() => toggleFixedR(nodeData)} size='small' icon={nodeData.fixedE ? <VerticalAlignMiddleOutlined /> : <VerticalAlignBottomOutlined />}></Button>
                            </Tooltip>
                        </div>}
                />
            </div>
        </div>
    );
}
